<template>
  <div class="comment-reply">
    <van-nav-bar
    :title="comment.reply_count>0 ? `${comment.reply_count}条数据`  : '暂无数据'"
    >
        <van-icon
        slot="left"
        name="cross"
        @click="$emit('close')" 
        />
    </van-nav-bar>
    <!-- #给这几个布局添加可以滚动的容器 -->
    <div class="scroll-wrap">
    <!-- 当前评论项 -->
 	<comment-item :comment="comment" />
    <!-- /当前评论项 -->
     <van-cell title="全部评论" />
    <!-- 评论列表 传递文章类别加上id-->
    <comment-list 
    :list="commentList"
    :source="comment.com_id"
    type="c"
    />
    <!-- 发布评论 -->
    <div class="post-wrap">
        <van-button class="post-btn" size="small" round @click='isPostShow = true'>写评论</van-button>
    </div> 
    <!-- /发布评论 -->
     <!-- 发布评论的弹层，视频里面没有提到，自行补充 -->
    <van-popup v-model="isPostShow" position="bottom">
      <comment-post
        :target="comment.com_id"
        @post-success="onPostSuccess"
        :articleId="articleId"
        type="c"
      />
    </van-popup>
    </div>
  </div>
</template>

<script>
// 数据重复 原因我们回复评论打开就看见评论列表了 所以不光在created里加载了一次还触发loading事件又加载了一次 这样就数据重复了 但是我们不能不让onload在created里我们要获取评论总数 就必须在进入页面详情时就加载这样才能出现 
// 解决办法 让list中的api immediate-check 是否在初始化时立即执行滚动位置检查 设置为false即可 不让其首次触发就行了 当我网路慢的时候发现 不出现加载图标了 原因是不触发滚动加载无法激活图标状态 所以我们应该手动开启
import CommentItem from './comment-item.vue'
import CommentList from './comment-list.vue'
import CommentPost from './comment-post.vue'
export default {
  name: 'CommentReply',
  components: {
      CommentItem,
      CommentList,
      CommentPost
  },
  inject: { 
        articleId: {
            type: [Number, String, Object],
            default: null
        }
    },
  props: {
      comment:{
          type:Object,
          required:true
      }
  },
  data () {
    return {
        isPostShow: false,
        commentList: [],

    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
      onPostSuccess(data){
        //   更新品论数量
        this.comment.reply_count++;
        // 关闭弹层
        this.isPostShow=false;
        // 将最新回复内容置顶
        this.commentList.unshift(data.new_obj)
      }
  }
}
</script>

<style scoped lang="less">
    .post-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
  .post-btn {
    width: 60%;
  }
}
.scroll-wrap {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 88px;
  overflow-y: auto;
}
</style>
